<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col
        :sm="24"
        :md="24"
        :xl="18"
        :style="{ marginBottom: '12px', paddingRight: 0, paddingLeft: 0 }"
      >
        <a-card
          class="guide"
          :loading="guideLoading"
          :style="{ marginBottom: '12px' }"
        >
          <div class="card-header">
            <div class="antMainTitle">数据概览</div>
            <div class="subtitle ml-20">
              快速完成店铺搭建，开启您的生意经营～
            </div>
            <div class="extra" @click="handleOpenOrDownAwayGuide">
              {{ guideOpenOrDown ? '收起' : '展开' }}
            </div>
          </div>
          <transition
            leave-active-class="animated fadeOut"
            enter-active-class="animated fadeIn"
            name="fade"
          >
            <div class="guide-body" v-if="guideOpenOrDown">
              <div class="guide-body-tabs">
                <div
                  :class="[
                    'guide-body-tabs__tab antMainTitle',
                    index == guideSelectedIdx ? 'selected' : ''
                  ]"
                  v-for="(item, index) in guideArr"
                  :key="index"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="guide-body-tabs-content">
                <div
                  class="guide-body-tabs-content__row"
                  v-for="(item, index) in guideArr[guideSelectedIdx].content"
                  :key="index"
                >
                  <div class="guide-body-tabs-content__row_col">
                    <div
                      class="guide-body-tabs-content__row_col_title antMainTitle"
                    >
                      {{ item.title }}
                    </div>
                    <div class="guide-body-tabs-content__row_col_desc subtitle">
                      {{ item.desc }}
                    </div>
                  </div>
                  <div class="guide-body-tabs-content__row_col">
                    <a-button type="primary">立即配置</a-button>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </a-card>

        <a-card :style="{ marginBottom: '12px' }">
          <div class="card-header card-bordered-bottom">
            <div class="antMainTitle">经营数据</div>
            <div class="subtitle extra">
              <img
                src="https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/refresh@2x.png"
                class="refresh"
              />
              数据更新：2022-11-10
            </div>
          </div>
          <div class="data-chart">
            <div class="data-chart-item">
              <div class="data-chart-item__title flex-center">店铺数据</div>
              <div class="data-chart-item__content">
                <div class="data-chart-item__content-col">
                  <div class="data-chart-item__content-col-num">
                    {{ todayCount.order_amount_to_yuan || 0 }}<span>万</span>
                  </div>
                  <div class="data-chart-item__content-col-title subtitle">
                    营业收入
                  </div>
                </div>
                <div class="data-chart-item__content-col">
                  <div class="data-chart-item__content-col-num">
                    {{ todayCount.passenger_stat || 0 }}
                  </div>
                  <div class="data-chart-item__content-col-title subtitle">
                    顾客人数
                  </div>
                </div>
                <div class="data-chart-item__content-col">
                  <div class="data-chart-item__content-col-num">
                    {{ todayCount.passenger_stat || 0 }}
                  </div>
                  <div class="data-chart-item__content-col-title subtitle">
                    商品销量
                  </div>
                </div>
                <div class="data-chart-item__content-col">
                  <div class="data-chart-item__content-col-num">
                    {{ todayCount.user_unit_price_to_yuan || 0 }}
                  </div>
                  <div class="data-chart-item__content-col-title subtitle">
                    客单价
                  </div>
                </div>
                <div class="data-chart-item__content-col">
                  <div class="data-chart-item__content-col-num">
                    {{ todayCount.passenger_stat || 0 }}
                  </div>
                  <div class="data-chart-item__content-col-title subtitle">
                    排队人数
                  </div>
                </div>
                <div class="data-chart-item__content-col">
                  <div class="data-chart-item__content-col-num">
                    {{ todayCount.passenger_stat || 0 }}
                  </div>
                  <div class="data-chart-item__content-col-title subtitle">
                    包厢预定数
                  </div>
                </div>
                <div class="data-chart-item__content-col">
                  <div class="data-chart-item__content-col-num">
                    {{ todayCount.passenger_stat || 0 }}
                  </div>
                  <div class="data-chart-item__content-col-title subtitle">
                    取消人数
                  </div>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="fx">
                <div class="data-chart-item">
                  <div class="data-chart-item__title flex-center">商品数据</div>
                  <div class="data-chart-item__content">
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.order_amount_to_yuan || 0
                        }}<span>万</span>
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        商品曝光数
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.passenger_stat || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        商品浏览数
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.passenger_stat || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        下单件数
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.user_unit_price_to_yuan || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        支付成功数
                      </div>
                    </div>
                  </div>
                </div>
                <div class="data-chart-item">
                  <div class="data-chart-item__title flex-center">交易数据</div>
                  <div class="data-chart-item__content">
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.order_amount_to_yuan || 0
                        }}<span>万</span>
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        订单笔数
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.passenger_stat || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        支付金额
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.passenger_stat || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        退款笔数
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.user_unit_price_to_yuan || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        退款金额
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.passenger_stat || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        笔单价
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.passenger_stat || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        订单优惠金额
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.passenger_stat || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        取消订单数
                      </div>
                    </div>
                    <div class="data-chart-item__content-col">
                      <div class="data-chart-item__content-col-num">
                        {{ todayCount.passenger_stat || 0 }}
                      </div>
                      <div class="data-chart-item__content-col-title subtitle">
                        取消订单金额
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="chart-analysis">
                <div class="chart-analysis-title flex-center">转化率分析</div>
                <div class="chart-analysis__body">
                  <div class="chart-analysis__body_cell bg1">
                    <div class="cell-td">
                      <div class="cell-td-label">商品浏览量</div>
                      <div class="cell-td-num">13059</div>
                    </div>
                    <div class="cell-td">
                      <div class="cell-td-main">浏览量</div>
                    </div>
                  </div>
                  <div class="chart-analysis__body_cell bg2">
                    <div class="cell-td">
                      <div class="cell-td-label">下单人数</div>
                      <div class="cell-td-num">13059</div>
                    </div>
                    <div class="cell-td">
                      <div class="cell-td-label">下单件数</div>
                      <div class="cell-td-num">13059</div>
                    </div>
                    <div class="cell-td">
                      <div class="cell-td-main">下单</div>
                    </div>
                  </div>
                  <div class="chart-analysis__body_cell bg3">
                    <div class="cell-td">
                      <div class="cell-td-label">支付成功件数</div>
                      <div class="cell-td-num">13059</div>
                    </div>
                    <div class="cell-td">
                      <div class="cell-td-label">支付金额</div>
                      <div class="cell-td-num">13059</div>
                    </div>
                    <div class="cell-td">
                      <div class="cell-td-main">支付</div>
                    </div>
                  </div>
                  <div class="chart-analysis__body_line">
                    <div class="center">
                      <div class="top">转化率 <span>90</span> %</div>
                      <div class="bottom">转化率 <span>90</span> %</div>
                    </div>
                    <div class="right">转化率 <span>90</span> %</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card title="经营工具" :style="{ marginBottom: '12px' }">
          <div class="tools flex wrap">
            <div
              class="flex-1 tools-col"
              v-for="(item, index) in toolsArr"
              :key="index"
            >
              <img :src="item.icon" class="tools-col__icon" />
              <div class="tools-col__text antSecondTitle">{{ item.title }}</div>
            </div>
          </div>
        </a-card>
        <a-card title="商品销售趋势" :style="{ marginBottom: '12px' }">
          <div v-resize="handleResize">
            <MutiLine :width="MutiLineStyle.width"></MutiLine>
          </div>
        </a-card>
        <a-row :gutter="24">
          <a-col :lg="12" :md="12" :sm="24" :xs="24">
            <a-card title="商品销售Top10">
              <rank-list :list="rankList" />
            </a-card>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24" :xs="24">
            <a-card title="商品销售Top10">
              <rank-list :list="rankList" />
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :sm="24" :md="24" :xl="6" :style="{ paddingRight: 0 }">
        <a-card title="待办事项" :style="{ marginBottom: '12px' }">
          <div class="todo">
            <div class="todo-item">
              <div class="todo-item-num"><span>0</span> 条</div>
              <div class="subtitle">待退款订单</div>
            </div>
            <div class="todo-item">
              <div class="todo-item-num"><span>0</span> 条</div>
              <div class="subtitle">待审核订单</div>
            </div>
            <div class="todo-item">
              <div class="todo-item-num"><span>0</span> 条</div>
              <div class="subtitle">待发货订单</div>
            </div>
            <div class="todo-item">
              <div class="todo-item-num"><span>0</span> 条</div>
              <div class="subtitle">待自提订单</div>
            </div>
          </div>
        </a-card>
        <a-card title="使用帮助" :style="{ marginBottom: '12px' }">
          <div class="help-box">
            <div class="help-box-list flex-center">帮助中心</div>
            <div class="help-box-list">常见问题</div>
            <div class="help-box-list">产品更新</div>
            <div class="help-box-list">公告通知</div>
            <div class="help-box-download">
              <img
                class="help-box-download__icon"
                src="https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/xszzswwxiazai-2@2x.png"
              />
            </div>
          </div>
        </a-card>
        <a-card class="APP-download">
          <div class="content">
            <div class="antMainTitle">星管家APP下载</div>
            <div class="subtitle flex-center marginTop8">
              随时随地轻松管理店铺
            </div>
          </div>
          <img
            src="https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/xingguanjiadownloadicon.png"
            alt=""
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea,
  MutiLine
} from '@/components'
import {shortCount, shortDataCount} from "@/api/short"
import { mixinDevice } from '@/utils/mixin'

const barData = []
const barData2 = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }
]

const searchTableColumns = [
  {
    dataIndex: 'index',
    title: '排名',
    width: 90
  },
  {
    dataIndex: 'keyword',
    title: '搜索关键词'
  },
  {
    dataIndex: 'count',
    title: '用户数'
  },
  {
    dataIndex: 'range',
    title: '周涨幅',
    align: 'right',
    sorter: (a, b) => a.range - b.range,
    scopedSlots: { customRender: 'range' }
  }
]
const searchData = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: `搜索关键词-${i}`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const DataSet = require('@antv/data-set')

const sourceData = [
  { item: '家用电器', count: 32.2 },
  { item: '食用酒水', count: 21 },
  { item: '个护健康', count: 17 },
  { item: '服饰箱包', count: 13 },
  { item: '母婴产品', count: 9 },
  { item: '其他', count: 7.8 }
]

const pieScale = [
  {
    dataKey: 'percent',
    min: 0,
    formatter: '.0%'
  }
]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
    MutiLine
  },
  data () {
    return {
      loading: true,
      rankList,

      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchTableColumns,
      searchData,

      barData,
      barData2,

      //
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      guideOpenOrDown: true,
      guideLoading: false,
      guideSelectedIdx: 0,
      guideArr: [
        {
          name: '基础配置',
          content: [
            {
              title: '扫码点餐小程序配置',
              desc: '让顾客进店扫码点餐，不再排队等待'
            },
            {
              title: '收款账户配置',
              desc: '设置你的收款账户，并开通是否允许退款申请'
            },
            {
              title: '收银POS机配置',
              desc: '收银硬件功能配置，提供更好的顾客体验'
            }
          ]
        },
        { name: '小程序装修' },
        { name: '商品上架' },
        { name: '配置权限' }
      ],
      todoList: [{ num: 0 }],
      todayCount: {
        order_amount_to_yuan: 0,
        passenger_stat: 0,
        user_unit_price_to_yuan: 0
      },
      toolsArr: [
        {
          title: '促销活动',
          icon: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/cuxiaohuodong.png'
        },
        {
          title: '预售',
          icon: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/platformyushou.png'
        },
        {
          title: '拼团',
          icon: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/platformpin.png'
        },
        {
          title: '用户营销',
          icon: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/platformyonghuyingxiao.png'
        },
        {
          title: '场景营销',
          icon: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/platformchangjingyingxiao.png'
        },
        {
          title: '游戏营销',
          icon: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/platformyouxiyingxiao.png'
        },
        {
          title: '视频号',
          icon: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/platformshipinhao.png'
        },
        {
          title: '报名活动',
          icon: 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/platformbaominghuodong.png'
        }
      ],
      MutiLineStyle: { width: '957', height: '400' },
      dateType: 'all'
    }
  },
  mounted () {
    shortCount({dateType: this.dateType}).then(resp=>{
      console.log(resp, "shortCount, shortDataCount");
    }) 
    shortDataCount({dateType: this.dateType}).then(resp=>{
      console.log(resp, 'shortDataCount');
    })
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  methods: {
    handleOpenOrDownAwayGuide () {
      this.guideOpenOrDown = !this.guideOpenOrDown
    },
    handleResize ({ width, height }) {
      width = width.replace('px', '')
      height = height.replace('px', '')
      this.MutiLineStyle = { width, height }
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../../style/ant-design-variables.less');
.page-header-index-wide {
  .ant-row {
    margin: 10px 10px 0 !important;
  }
}

.card-bordered-bottom {
  border-bottom: 1px solid @divider-color;
  padding-bottom: 14px;
}
.card-header {
  display: flex;
  align-items: center;
  .extra {
    display: flex;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
  }
  .refresh {
    width: 12px;
    height: 13px;
    margin-right: 8px;
    vertical-align: middle;
  }
}
.guide {
  &-body {
    display: flex;
    margin-top: 13px;
    &-tabs {
      flex: 0 0 140px;
      border-right: 1px solid #f2f7ff;
      padding: 8px 0;
      &__tab {
        font-size: 14px;
        line-height: 44px;
        font-weight: 400;
        padding-left: 15px;
        position: relative;
        &.selected:after {
          content: '';
          width: 2px;
          height: 44px;
          background: #4393F2;
          top: 0;
          position: absolute;
          right: 0;
        }
      }
    }
    &-tabs-content {
      flex: 1;
      padding: 21px 28px 0;
      background-image: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/xinrenzhidaobanner.png');
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: contain;
      &__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
        &:last-of-type {
          margin-bottom: 31px;
        }
        &_col {
          flex: 1;
          &_title {
            font-size: 15px;
          }
          &_desc {
            font-size: 11px;
            margin-top: 7px;
          }
        }
      }
    }
  }
}
.todo {
  display: flex;
  flex-wrap: wrap;
  &-item {
    flex: 0 0 33%;
    text-align: center;
    margin-bottom: 33px;
    &:nth-of-type(1) {
      background: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/huaban32%402x.png')
        no-repeat center;
      background-size: 56px 58px;
    }
    &:nth-of-type(2) {
      background: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/shenhe%402x.png')
        no-repeat center;
      background-size: 44px 48px;
    }
    &:nth-of-type(3) {
      background: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/daifahuodingdan%402x.png')
        no-repeat center;
      background-size: 53px 42px;
    }
    &:nth-of-type(4) {
      background: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/01_zitidian%402x.png')
        no-repeat center;
      background-size: 54px 51px;
    }
    &-num {
      font-size: 16px;
      font-family: DIN-Medium, DIN;
      font-weight: 500;
      color: @main-color;
      span {
        color: @primary-color;
        font-size: 30px;
      }
    }
  }
}
.data-chart {
  padding: 20px 0 0 9px;
  &-item__title,
  .chart-analysis-title {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #787a7f;
    margin-bottom: 19px;
    &:before {
      content: '';
      width: 4px;
      height: 14px;
      background: rgba(89, 105, 246, 0.82);
      border-radius: 2px;
      margin-right: 6px;
    }
  }
  &-item {
    &__content {
      display: flex;
      flex-wrap: wrap;
      &-col {
        flex: 1;
        margin-bottom: 21px;
        &-num {
          font-size: 21px;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: #1f2026;
          span {
            font-size: 15px;
          }
        }
        &-title {
          margin-top: 2px;
        }
      }
    }
  }
  .fx {
    flex: 1.33;
    .data-chart-item__content-col {
      width: 23%;
      flex: auto;
    }
  }
  .chart-analysis {
    flex: 1;
    margin-bottom: 24px;
    &__body {
      position: relative;
      &_cell {
        height: 59px;
        margin-bottom: 30px;
        background-repeat: no-repeat;
        background-size: 100%;
        display: flex;
        align-items: center;
        padding-left: 17px;
        &.bg1 {
          background-image: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/shaloutu473589wireyt.png');
          width: 256px;
          padding-right: 28px;
        }
        &.bg2 {
          background-image: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/shaloutuefjskjru345.png');
          width: 245px;
          padding-right: 24px;
        }
        &.bg3 {
          background-image: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/shaloutu2357493578re.png');
          width: 237px;
          padding-right: 15px;
        }
        .cell-td {
          flex: 1;
          &:last-of-type {
            flex: inherit;
          }
        }
        .cell-td-label {
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
        .cell-td-num {
          font-size: 15px;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: #333333;
        }
        .cell-td-main {
          font-size: 13px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }
      }
      &_line {
        background-image: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/shaloutujiantouafjkld.png');
        background-size: 66px 100%;
        position: absolute;
        top: 13px;
        left: 245px;
        width: 100px;
        height: 214px;
        background-repeat: no-repeat;
        display: inline-flex;
        .center {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-evenly;
          margin-left: 31px;
        }
        .right {
          margin-left: auto;
          text-align: center;
        }
        .right,
        .top,
        .bottom {
          writing-mode: vertical-rl;
          font-size: 10px;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #666666;
          span {
            text-orientation: mixed;
            writing-mode: horizontal-tb;
          }
        }
      }
    }
  }
}
.help-box {
  padding-top: calc(23px - 14px);
  position: relative;
  &-list {
    padding-bottom: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    &:first-of-type:after {
      content: '';
      background-image: url('https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/tubiaozuixin01%402x.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 28px;
      height: 20px;
      margin-left: 8px;
    }
  }
  &-download {
    position: absolute;
    top: 50%;
    right: -20px;
    width: 40px;
    height: 50px;
    background: #f1f2fe;
    border-radius: 10px 0px 0px 10px;
    &__icon {
      width: 40px;
      height: 50px;
    }
  }
}
.tools {
  &-col {
    text-align: center;
    margin-bottom: 16px;
    &__icon {
      width: 54px;
      height: 54px;
    }
    &__text {
      margin-top: 9px;
    }
  }
}
.APP-download {
  ::v-deep.ant-card-body {
    display: flex;
    align-items: center;
    padding: 0;
    padding-left: 18px;
  }
  .marginTop8 {
    margin-top: 8px;
  }
  img {
    width: 128px;
    height: 90px;
    margin-left: auto;
  }
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 12px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
/*the animation definition*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
</style>
